<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>储值卡充值</title>

    <link rel="stylesheet" href="../css/weui.css" />
    <link rel="stylesheet" href="../css/example.css" />
    <link rel="stylesheet" href="../css/plate.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/moneycard_recharge.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <style>
        html,
        body {
            font-family: 'PingFangSC-Regular';
            width: 100%;
            height: 99%;
            background: #F5F5F9;
            color: rgba(51, 51, 51, 0.87);
            margin: 0;
            overflow-y: auto;
        }

        .weui-tab {
            height: 14vh;
            background-color: blue;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .page__hd {
            padding: 0px;
        }

        .weui-cells {

            margin-top: 0px;
        }

        .weui-cell {
            display: flex;
            align-items: center;
        }

        .weui-cells>.weui-cell>p {
            color: #333333;
        }

        .hhead {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .car {
            width: 30px;
            height: 30px;
        }

        .parking_name {
            color: black;
            font-weight: 500;
            margin: 0px 6px 0px 6px;

        }

        .type_card {
            color: white;
            font-size: 10px;
            background-color: #ffba1e;
            padding: 3px 7px 3px 7px;
            margin-left: 4px;
            border-radius: 6px;
        }

        .ffooter {
            display: flex;
            align-items: center;
        }


        .discount {
            display: flex;
            flex-wrap: wrap;
        }

        .row {
            justify-content: flex-start;
        }

        .row:nth-child(2) {
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
            margin: 10px 30px 10px 30px;
            color: #0051bc;
            font-size: 12px;
        }

        .card {
            margin-top: 4px;
            padding: 2px 10px 2px 10px;
            background-color: #f5f5f5;
            border-radius: 12px;
            color: #0051bc;

        }

        .sum {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .total {
            font-size: 12px;
        }


        .total_money {
            font-size: 20px;
            color: #0051bc;
            margin: 0px 4px 0px 4px;
            font-weight: 600;
        }

        #gopay {
            background-color: #0051bc;
            color: white;
        }

        .weui-btn:after {
            border: none;
        }

        #cancel {
            color: #bababa;
            background-color: #F5F5F9;
            border: 1px solid #c4c4c4;
        }

        .weui-btn_disabled {
            border-radius: 6px;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="weui-cells" style="margin-top: 0px;">
            <div class="weui-cell hhead">
                <div class="weui-cell__bd hhead">
                    <img class="car" src="../images/car@2x.png" alt="">
                    <div>
                        <p id="car_num" class="parking_name"></p>
                    </div>
                    <div class="type_card">储值卡</div>
                </div>
            </div>
        </div>

        <div class="weui-cells" style="margin-top: 10px;">
            <div class="weui-cell ">
                <div class="weui-cell__bd">
                    <p>储值卡余额</p>
                </div>
                <div class="weui-cell__ft ffooter" id="intime">
                    <span id="rest_money" class="total_money">0</span>
                    <span id="discountableAmount"></span>元
                </div>
            </div>
        </div>

        <div class="weui-cells" style="margin-top: 10px;">
            <div class="weui-cell ">
                <div class="weui-cell__bd">
                    <div class="row">
                        <p>本次充值</p>
                    </div>
                    <div class="row">
                        <span class="card active">100</span>
                        <span class="card">300</span>
                        <span class="card">500</span>
                        <span class="card">1000</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="weui-cells" style="margin-top: 10px;">
            <div class="weui-cell">
                <div class="weui-cell__bd sum">
                    <span class="total">合计：</span>
                    <span id="total_money" class="total_money">100</span>
                    <span class="total">元</span>
                </div>
            </div>
        </div>

        <div class="page__bd page__bd_spacing" style="margin-top: 45px;">
            <a id="gopay" class="weui-btn weui-btn_primary weui-btn_disabled">确定充值</a>
            <a id="cancel" class="weui-btn weui-btn_primary weui-btn_disabled">取消</a>
        </div>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script src="../js/common.js"></script>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            //code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。
            var auth_code = get_querystring("code");
            // 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
            var state = get_querystring("state");
            //openid和plate是全局变量
            var openid = null;
            var plate = null;
            var price = null;
            var coupon = null;


            function query_user() {
                var data = {
                    openid: openid,
                    auth_code: auth_code
                };
                var url = hostname + rest_domain + '/wechat/user/usermanager';
                $.ajax({
                    type: 'get',
                    url: url,
                    data: data,
                    timeout: 3 * 1000,
                    success: function (result, textStatus) {
                        var data = result.data;
                        if (data) {
                            localStorage.setItem('userinfo', JSON.stringify(result.data));
                        }
                        var uesrinfo = JSON.parse(localStorage.getItem('userinfo'));
                        var plates = uesrinfo.plates
                        draw_userplates(plates);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert('query user failed');
                    }
                });
            }

            function draw_userplates(userplate) {
                var plates = JSON.stringify(userplate);
                for (var key in userplate) {
                    var last_plate = JSON.stringify(key);
                }
                var car_num = last_plate.replace(/\"/g, "");
                $('#car_num').html(car_num);
            }

            //查询储值卡的
            //将用户传参，根据用户查询项对应的储值卡
            function queryvaluecard(info) {
                var data = {};
                //将用户的openid赋值给data.openid
                data.openid = info.openid;
                var url = hostname + rest_domain + '/parkingcloud/coupon/wechat_cardlist';
                //以get的方式获取数据
                //success: function返回三个参数
                //1、从服务器返回的数据，根据dataType参数或dataFilter回调函数格式化（如果指定）; 
                //2、描述状态的字符串; 
                //3、和jqXHR（在jQuery 1.4.x，XMLHttpRequest）对象
                $.ajax({
                    type: 'get',
                    url: url,
                    data: data,
                    success: function (result, textStatus) {
                        if (!result || !result.result || !result.data) {
                            // 返回的数据全部为空
                            $('#tipdialog .weui-dialog__bd').html(result && result.message || '查询失败');
                            $('#tipdialog').fadeIn(200);
                            return;
                        }

                        drawvaluecard(result.data || []);
                        $('#gopay').on('click', function () {
                            window.location.href = 'success_storage.html';
                        });
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert('queryvaluecard failed ');
                        $('#tipdialog .weui-dialog__bd').html('查询失败');
                        $('#tipdialog').fadeIn(200);
                    }
                })
            }

            //在页面上绘制储值卡
            //传递data对象
            function drawvaluecard(data) {
                var ready_money;
                $('.card').click(function () {
                    $(this).addClass('active').siblings().removeClass('active');
                    ready_money = parseInt($(this).html()) + parseInt($("#rest_money").html());
                    $("#total_money").html(ready_money);
                })
                var voucherType = {
                    1: ['时长卡', '小时', 'timecard'],
                    2: ['现金卡', '元', 'cashcard'],
                    4: ['计次卡', '次', 'countcard']
                }
                if (data.length == 0) {
                    $('#rest_money').html('0');
                }
                else {
                    for (var i = 0; i < data.length; i++) {
                        var curdata = data[i];
                        var currentMount = curdata.mount;
                        currentMount = curdata.mount / 100;
                        currentUsemount = parseInt(curdata.usemount / 100);
                        $('#rest_money').html((currentMount - currentUsemount) + voucherType[curdata.mode][1]);
                    }
                }

            }

            $(function () {
                openid = sessionStorage.getItem("openid");
                var local_auth_code = sessionStorage.getItem("auth_code");
                if (local_auth_code != auth_code || !openid) {
                    sessionStorage.clear();
                    sessionStorage.setItem("auth_code", auth_code);
                    sessionStorage.setItem("state", JSON.stringify(state));
                    query_user();
                    //从本地获取用户信息
                    var baseinfo = JSON.parse(localStorage.getItem('userinfo'));
                    //查询储值卡信息，做相应的变化
                    queryvaluecard(baseinfo);
                }



                $('#cancel').click(function () {
                    window.location.href = 'nomoney_car.html';
                });

            })
        </script>
</body>

</html>